// 背景色
body {
  @include themify() {
    background-color: themed('bodyBg');
  }
}


// 默认首页背景图
.theme-navy-blue #app,
.theme-navy-blue #app .screen-container {
}

#app {
  position: relative;
  width: 100%;
  height: 100%;
  font-size: 14px;
  @include themify() {
    color: themed('textColor');
  }
  overflow: hidden;
  // app 布局
  .app-layout {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    // app 主体容器
    .app-container {
      position: relative;
      padding-top: 50px;
      height: 100%;
      overflow: hidden;
    }
  }

  // 内容
  .main-container {
    position: relative;
    width: calc(100% - 200px);
    height: 100%;
    padding: 10px;
    margin-left: 200px;
    @include themify() {
      background-color: themed('bodyBg');
    }
    overflow: auto;
    transition: all 0.3s cubic-bezier(0.3, 0, 0.86, 0.57);
    display: flex;
    flex-direction: column;
  }
}


.flex-column-container {
  display: flex;
  flex-direction: column;
}

.flex-row-container {
  display: flex;
  flex-direction: row;
}

/* 输入框 按钮 */
.filter-box {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  flex-wrap: wrap;
  /* 筛选框左 */
  .filter-left,
  .filter-right {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    margin-right: 5px;
    line-height: 40px;

    > * {
      flex-shrink: 0;
    }

    > .el-input,
    > .el-select {
      width: 180px !important;
      margin-right: 10px;
    }

    > .el-dropdown {
      margin-left: 10px;
    }
  }

  .filter-left {
    margin-right: 10px;
  }

}

/* 表格包裹 */
.flex-table-box {
  flex-grow: 1;
  overflow: hidden;
}

/* 分页器 */
.page-block {
  padding: 20px 0;
  text-align: right;

  .el-pagination__total,
  .el-pagination__jump {
    @include themify() {
      color: themed("pageColor");
    }
  }
}

// 宽度
div.w-300,
*.w-300 {
  width: 300px;
}

div.w-240 {
  width: 240px;
}


.ml-5 {
  margin-left: 5px;
}

.mr-5 {
  margin-right: 5px;
}

.pl-10 {
  padding-left: 10px;
}
